<template>
<div class="ref">
  <div>
    {{ name }}
    {{ age }}
    {{ maritalStatus }}
    <button @click="change">年龄++</button>
    {{ com }}
    <input v-model="age" type="text" />

    <!-- <a-button>oo</a-button> -->
    <div v-for="item in listData" :key="item.age">
      <span>年龄：{{ item.age }},婚姻：{{ item.ma }}</span>
    </div>
    <div style="margintop: 40px">
      <RouterView />
    </div>
  </div>
  <div>
    <h2>响应式数据,reactive、toRefs、computed、ref、watch、watchEffect</h2>
    <p>
      reactive:接收一个普通对象然后返回该普通对象的响应式代理,响应式转换是“深层的”：会影响对象内部所有嵌套的属性。返回的代理对象不等于原始对象。建议仅使用代理对象而避免依赖原始对象。
    </p>
    <p>
      ref:接受一个参数值并返回一个响应式且可改变的 ref 对象。ref
      对象拥有一个指向内部值的单一属性 .value。在模版中不需要.value
    </p>
    <p>
      computed:传入一个 getter 函数，返回一个默认不可手动修改的 ref
      对象。传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象。
    </p>
    <p>
      readonly:传入一个对象（响应式或普通）或
      ref，返回一个原始对象的只读代理。一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的。
    </p>
    <p>
      watchEffect:立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。当
      watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，
      侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
    </p>
    <p>
      watch:watch API 完全等效于 2.x this.$watch （以及 watch
      中相应的选项）。watch
      需要侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调。
    </p>
  </div>
</div>
</template>

<script>
import {
  reactive,
  toRefs,
  computed,
  watch,
  watchEffect
} from "vue";
// import { Button } from "ant-design-vue";
// import "ant-design-vue/dist/antd.css";
export default {
  setup() {
    const obj = reactive({
      name: "王凯",
      age: 18,
      maritalStatus: "未婚",
      listData: [],
    });
    console.log(obj);
    const obj2 = toRefs(obj);
    console.log(obj2);

    let com = computed({
      get: () => {
        if (obj2.age.value > 25) {
          obj2.maritalStatus.value = "已婚";
          return "已婚";
        } else {
          obj2.maritalStatus.value = "未婚";
          return "未婚";
        }
      },
      set: (val) => {
        if (val > 25) {
          obj2.maritalStatus.value = "已婚";
        } else {
          obj2.maritalStatus.value = "未婚";
        }
      },
    });
    watch(
      () => obj2.age.value,
      (a) => {
        com.value = Number(a);
      }
    );
    watch(obj2.listData.value, (a) => {
      console.log("变化了");
    });
    watchEffect(() => {});
    const change = () => {
      obj2.age.value++;
      obj2.listData.value.push({
        age: obj2.age.value,
        ma: obj2.maritalStatus.value,
      });
    };

    return {
      ...obj2,
      change,
      com,
    };
  },
};
</script>

<style lang="scss" scoped>
.ref {
  display: flex;
  justify-content: space-between;
}
</style>
